@import "../global/global";
@import "../error-bubble/error-bubble";

$ring-input-xs: 50px;
$ring-input-s: 100px;
$ring-input-md: 200px;
$ring-input-l: 400px;

/**
 * @name Input Sizes
 * @category Style-only Components
 * @example-file ./input-size.examples.html
 */
@mixin set-width-in-pixels($width) {
  display: inline-block;
  width: $width;

  & ~ .ring-error-bubble {
    left: $width + 2;
  }
}

.ring-input-size_xs.ring-input-size_xs {
  @include set-width-in-pixels($ring-input-xs);
}

.ring-input-size_s.ring-input-size_s {
  @include set-width-in-pixels($ring-input-s);
}

.ring-input-size_md.ring-input-size_md {
  @include set-width-in-pixels($ring-input-md);
}

.ring-input-size_l.ring-input-size_l {
  @include set-width-in-pixels($ring-input-l);
}
